/*
 * @Author: hongbin
 * @Date: 2023-03-30 13:33:19
 * @LastEditors: hongbin
 * @LastEditTime: 2023-03-30 15:53:12
 * @Description: 图片粒子
 */
import { ThreeHelper } from "@/ThreeHelper";
import { PictureParticle } from "@/components/PictureParticle";
import Layout from "@/components/Three/Layout";
import { FC } from "react";
import * as THREE from "three";

interface IProps {}

const Index: FC<IProps> = () => {
    return <Layout title={"图片粒子"} init={init} desc="by hongbin" />;
};

export default Index;

async function init(helper: ThreeHelper) {
    helper.addStats();
    helper.camera.position.set(0, 0, 11);
    helper.frameByFrame();
    helper.addGUI();
    helper.initLights();

    const texture1 = await helper.textureLoader.loadAsync(
        "/textures/memoNiLu.jpg"
    );
    texture1.encoding = THREE.sRGBEncoding;
    const texture2 = await helper.textureLoader.loadAsync("/textures/lazi.jpg");
    texture2.encoding = THREE.sRGBEncoding;

    const pictureParticle = new PictureParticle(texture1, texture2);

    helper.add(pictureParticle.particle);

    helper.gui
        ?.add({ p: 0 }, "p", 0, 1)
        .name("progress")
        .onChange((v: number) => {
            pictureParticle.setProgress(v);
        });

    // const plane = new THREE.Mesh(
    //     new THREE.PlaneGeometry(16, 9, 300, 200),
    //     new THREE.MeshStandardMaterial({
    //         map: texture,
    //     })
    // );

    // const geometry = plane.geometry;

    // const particle = new THREE.Points(
    //     geometry,
    //     new THREE.PointsMaterial({
    //         size: 0.1,
    //         map: texture,
    //     })
    // );

    // helper.add(plane);
    // helper.add(particle);
}
